<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>受控组件</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入react核心库  优先 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom用于支持react操作DOM，依赖react核心库 -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于将jsx转换为js -->
    <script type="text/javascript" src="../js//babel.min.js"></script>
    <script type="text/babel">
      // 1.受控组件：数据输入 就会维护到状态里面去，需要的时候在状态里面取出来 这就是受控组件
      class Demo extends React.Component {
        state = { username: "", password: "" };
        saveName = (event) => {
          this.setState({ username: event.target.value });
        };
        savePassword = (event) => {
          this.setState({ password: event.target.value });
        };
        login = () => {
          const { username, password } = this.state;
          alert(`用户名：${username}，密码：${password}`);
        };
        render() {
          return (
            <form action="" onSubmit={this.login}>
              用户名：
              <input type="text" onChange={this.saveName} name="username" />
              密码：
              <input
                type="password"
                onChange={this.savePassword}
                name="password"
              />
              <button type="submit">登录</button>
            </form>
          );
        }
      }
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>
